<template>
  <div class="main1">
    <div class="checkhead">
      <h1 class="stitle">货物信息查询</h1>
      <div class="search">
        <input type="text" v-model="goodName" placeholder="请输入商品名称">
        <a @click="search">
          <x-icon type="ios-search-strong" size="32" class="btnsearch"></x-icon>
        </a>
      </div>
    </div>
    <div class="checkpic" v-show="!list || list.length === 0">
      <p>可通过商品名称，模糊搜索其对应的HS编码和税费信息。</p>
      <img src="../assets/images/check.png" alt>
    </div>

    <!-- <div class="biaodan" v-show="list && list.length > 0"> -->
    <div
      class="gi-content"
      v-bind:style="{height: contentHeight + 'px'}"
      v-show="list && list.length > 0"
    >
      <list
        :config="ScrollConfig"
        @init="onInit"
        @refresh="onRefresh"
        @loadmore="onLoadMore"
        ref="giList"
      >
        <ul slot="scrollContent">
          <div class="weui-cells__title">查询结果</div>
          <li
            class="vux-form-preview weui-form-preview"
            v-for="(item, index) in list"
            v-bind:key="index"
          >
            <div class="weui-form-preview__hd">
              <label class="weui-form-preview__label">商品名称</label>
              <em class="weui-form-preview__value">{{item.goodName}}</em>
            </div>
            <div class="weui-form-preview__bd">
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">HS编码</label>
                <span class="weui-form-preview__value">{{item.hsCode}}</span>
              </div>
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">出口关税率</label>
                <span class="weui-form-preview__value">{{item.eTariffRate}}</span>
              </div>
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">消费税率</label>
                <span class="weui-form-preview__value">{{item.consumerITaxRate}}</span>
              </div>
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">增值税率</label>
                <span class="weui-form-preview__value">{{item.valueaddTaxRate}}</span>
              </div>
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">暂定进口税率</label>
                <span class="weui-form-preview__value">{{item.temporaryITaxRate}}</span>
              </div>
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">最惠国进口税率</label>
                <span class="weui-form-preview__value">{{item.mfnITaxRate}}</span>
              </div>
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">普通进口税率</label>
                <span class="weui-form-preview__value">{{item.ordinaryITaxRate}}</span>
              </div>
            </div>
          </li>
        </ul>
      </list>
      <!-- </div> -->
    </div>

    <router-view name="footer"></router-view>
  </div>
</template>
<script>
import { cookie } from "vux";
import List from "./common/ListView";

export default {
  name: "check_good_information",
  data() {
    return {
      goodName: "",
      list: [],
      pager: {
        pageNum: 1,
        pageSize: 10
      },
      ScrollConfig: {
        wrapper: "giScroll",
        mutationObserver: true,
        refresh: true,
        loadmore: true
      },
      contentHeight: "auto"
    };
  },
  components: {
    List
  },
  methods: {
    search() {
      // let userInfo = cookie.get("userinfo");
      // userInfo = userInfo ? JSON.parse(userInfo) : {};
      let goodName = this.goodName;
      let _target = this.$refs.giList;
      if (!goodName) {
        this.$vux.toast.text("请输入查询的货物信息");
        return;
      }
      let params = {
        goodName: goodName,
        ...this.pager
      };
      this.$http({
        url: "/infService/goodInfo",
        // headers: {
        //   "x-token": userInfo.token
        // },
        params: params
      })
        .then(resp => {
          if (resp.code === 200) {
            if (this.pager.pageNum > 1) {
              this.list = this.list.concat(resp.data.dataList);
            } else {
              this.list = resp.data.dataList;
            }
            _target &&
              (_target.loadmore =
                resp.data.pageNum * resp.data.pageSize < resp.data.total);
          } else {
            this.$vux.toast.text(resp.message);
          }
          this.contentHeight = this.countHeight(".gi-content");
          console.info("target--", _target);
          this.$nextTick(() => {
            _target && _target.refresh();
          });
        })
        .catch(() => {
          this.$nextTick(() => {
            _target && _target.refresh();
          });
        });
    },
    /**
     * countHeight 计算容器高度
     */
    countHeight(selector) {
      return (
        document.body.clientHeight -
        document.querySelector(".weui-tabbar").clientHeight -
        document.querySelector(".checkhead").offsetTop -
        document.querySelector(".checkhead").clientHeight
      );
    },
    onInit(scroller) {},
    onRefresh() {},
    onLoadMore() {
      this.pager.pageNum += 1;
      this.search();
    }
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.contentHeight = this.countHeight(".gi-content");
    // });
  }
};
</script>

<<style lang="less" scoped>
	@import '../styles/weui/widget/weui_cell/weui_form/weui-form-preview.less';
	.vux-form-preview {
		overflow: hidden;
  }
  .gi-content {
    overflow: hidden;
    position: relative;
  }
	
</style>

